<script setup>
const tableData = [
  {
    order: '1',
    photo: '',
    name: 'aaa',
    number: '1',
    price: '79.00',
    money: '99.00(含运费：20)',
  }
]
</script>

<template>
<div>
  <el-form :model="form" label-width="auto" >
    <el-form-item label="订单信息：" >
<div class="formBackground">

  <el-form style="max-width: 800px">
    <el-form-item label="订单号：">
11111111
    </el-form-item>
    <el-form-item label="实付款金额：">
1111
    </el-form-item>
    <el-form-item label="支付方式：">
微信
    </el-form-item>

  </el-form>
  <el-form style="max-width: 800px">
    <el-form-item label="配送方式：">
快递配送
    </el-form-item>
    <el-form-item label="运费金额：">
12
    </el-form-item>
    <el-form-item label="订单状态：">
进行中
    </el-form-item>

  </el-form>
  <el-form>
    <el-form-item label="备注：">
啦啦啦啦啦啦啦啦啦啦啦阿联啦啦啦啦啦啦阿联哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    </el-form-item>


  </el-form>

</div>


    </el-form-item>
    </el-form>
  <el-form-item label="商品信息：" >
<div class="goodInfo">
  <el-table :data="tableData" style="width: 150%">
    <el-table-column prop="order" label="订单号" width="80" />
    <el-table-column prop="photo" label="商品图片" width="80" >
      <img src="public/img/kt.jpg" alt="kt">
    </el-table-column>
    <el-table-column prop="name" label="商品名称" width="80" />
    <el-table-column prop="number" label="数量" width="80" />
    <el-table-column prop="price" label="单价（￥）" width="100" />
    <el-table-column prop="money" label="实付款" />
  </el-table>

  <div class="rightForm">
    <el-form>
      <el-form-item label="订单总额：">
        ￥246.00
      </el-form-item>
      <el-form-item label="优惠劵抵扣：">
        -￥10
      </el-form-item>
      <el-form-item label="能量抵扣：">
        -￥10
      </el-form-item>
      <el-form-item label="运费抵扣：">
        -￥0.00
      </el-form-item>
      <el-form-item label="实付款金额：">
        -￥0.00

      </el-form-item>
    </el-form>
  </div>
</div>
  </el-form-item>
  <el-form-item label="收货信息：">
    <div class="formBackground">

      <el-form style="max-width: 800px">
        <el-form-item label="收货人姓名：">
          新人
        </el-form-item>
        <el-form-item label="手机号：">
          11112222222
        </el-form-item>
        <el-form-item label="收货地址：">
          重庆  重庆市 渝中区
        </el-form-item>

      </el-form>
      <el-form>
        <el-form-item label="详细地址：">
          啊啦啦啦10-10-1
        </el-form-item>


      </el-form>

    </div>

  </el-form-item>
  <el-form-item label="发货信息：">
    <div class="formBackground">

      <el-form style="max-width: 800px">
        <el-form-item label="物流公司：">
          德邦快递
        </el-form-item>
        <el-form-item label="物流单号：">
          DPK11112222222
        </el-form-item>
        <el-form-item label="发货状态：">
          已发货
        </el-form-item>

      </el-form>
      <el-form>
        <el-form-item label="发货时间：">
         2010-10-1
        </el-form-item>


      </el-form>

    </div>

  </el-form-item>
  <el-form-item label="商品评论：">
    <el-form>
      <el-form-item label="评论描述：">
       很好很棒！
      </el-form-item>
      <el-form>
        <el-form-item label="视频图片：">
          <video  width="100" height="100" src="/video/video.mp4" controls></video>
         <img src="https://img0.baidu.com/it/u=2659410121,1222319812&fm=253&fmt=auto&app=138&f=JPEG?w=750&h=500" alt="tu">
        </el-form-item>


      </el-form>

    </el-form>
  </el-form-item>
</div>
</template>

<style scoped lang="scss">
div{
  width: 100%;
  padding: 10px;
el-form{
  width: 100%;
  el-form-item{
    background:#FAFAFA ;

  }

}
  .formBackground{
    width: 100%;
    background:#FAFAFA ;
    display: flex;
    flex-direction: column;
    .el-form{
      display: flex;

    }
  }

  .goodInfo{
    padding: 0;
  }
  .rightForm{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  img{
    width: 100px;
    height: 100px;
  }
}
</style>